<template>
  <div>
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>收藏歌曲</el-breadcrumb-item>
      <el-breadcrumb-item>歌曲热度</el-breadcrumb-item>
    </el-breadcrumb>
    <div class="echartsContainer" ref='container'></div>
  </div>
</template>

<script>
import * as echarts from 'echarts';
import testAx from '@/utils/testApiServer.js'
let name = []
let star = []
export default {
  name: "CollectHeat",
  methods: {
    async getStarData() {
      const {data: res} = await testAx.get('/star')
      name = res.data.name
      star = res.data.star
      // const name = res.data.name
      // const star = res.data.star
      // this.draw(name, star)
    },
    draw(name, star) {
      const options =  {
      title:{
        text:'歌曲热度排行',
        show:true,
        left:'center',
        textStyle:{
          color:'rgb(0,0,0,0.5)',
          fontFamily:'Arial',
          fontSize:'20',
        }
      },
      xAxis: {
        name:'歌曲名',
        type: "category",
        data: name,
        axisLabel: {
          rotate: -25,
          margin: 30,
          fontSize: 13,
          width: 90,
          overflow: 'break',
          align: 'left'
        },
      },
      yAxis: {
        name:'收藏量',
        type: "value",
      },
      series: [
        {
          data: star,
          type: "bar",
          itemStyle:{
            normal: {
              color:"#5bb8ea",
              label: {
                show: true,
                position: 'top'
              }
            }
          },
          showBackground: true,
          backgroundStyle: {
            color: "rgba(180, 180, 180, 0.2)",
          },
        },
      ],
    };
    // 初始化echarts实例
    var myChart = echarts.init(this.$refs.container);
    myChart.setOption(options);
    }
  },
  mounted() {
    this.getStarData()
    this.draw(name, star)
  },
};
</script>

<style>
.echartsContainer{
  width: 1100px;
  height: 680px;
  margin: 80px auto;
}
</style>